<template>
	<div>
		<div class="container">
			<van-nav-bar title="车辆详情" left-text="返回" left-arrow @click-left="onClickLeft" />
			<!-- 图片 -->
			<div>
				<van-swipe indicator-color="white" @change="onChange">
					<van-swipe-item v-for="(carImg,index) in this.carImgs" :key="index" @click="onClickImg()">
						<van-image fit="contain" :src="carImg.imgUrl" />
					</van-swipe-item>
					<template #indicator>
						<div class="custom-indicator">
							{{ current + 1 }}/{{carImgs.length}}
						</div>
					</template>
				</van-swipe>
			</div>
			<!-- 车辆信息 -->
			<p class="car-detail-title">{{car.brand}} {{car.series}} {{car.years}} {{car.gearBox}} {{car.engine}} {{car.edition}}</p>
			<p class="car-detail-price">总价{{car.totalPrice}} 首付只需{{car.downPayment}}</p>
			<p style="margin: 8px 0px; font-weight: bolder;">车辆基本信息</p>
			<div>
				<van-row type="flex" justify="space-around">
					<div class="car-detail-info-div" style="margin-left: 15px;">
						<p class="car-detail-info-1">上牌时间</p>
						<p class="car-detail-info-2">{{car.licensingTime}}</p>
					</div>
					<div class="car-detail-info-div">
						<p class="car-detail-info-1">表显里程</p>
						<p class="car-detail-info-2">{{car.tableMileage}}</p>
					</div>
					<div class="car-detail-info-div" style="margin-right: 15px;">
						<p class="car-detail-info-1">变速箱</p>
						<p class="car-detail-info-2">{{car.gearBox}}</p>
					</div>

				</van-row>
				<van-row type="flex" justify="space-around">
					<div class="car-detail-info-div" style="margin-left: 15px;">
						<p class="car-detail-info-1">排量</p>
						<p class="car-detail-info-2">{{car.engine}}</p>
					</div>
					<div class="car-detail-info-div">
						<p class="car-detail-info-1">颜色</p>
						<p class="car-detail-info-2">{{car.color}}</p>
					</div>
					<div class="car-detail-info-div" style="margin-right: 15px;">
						<p class="car-detail-info-1">环保标准</p>
						<p class="car-detail-info-2">{{car.environmentalStandards}}</p>
					</div>
				</van-row>
			</div>
			<div>
				<van-row type="flex" align="center">
					<van-icon name="shop" size="30px" />
					<p>店名：{{shopInfo.shopName}}</p>
				</van-row>
				<van-row type="flex" align="center">
					<van-icon name="location" size="30px" />
					<p>地址：{{shopInfo.shopAddress}}</p>
				</van-row>
			</div>
			<van-collapse v-model="activeNames" style="width: 100%;">
				<van-collapse-item title="其他说明" name="1">
					<p style="text-align: left; font-size: 18px;">{{ car.notes }}</p>
				</van-collapse-item>
			</van-collapse>
		</div>
		<!-- 购车导航 -->
		<div>
			<van-goods-action style="padding-bottom: 10px;">
				<van-goods-action-icon @click="onClickWeiXin" icon="chat-o" text="微信联系" color="#07c160" />
				<van-goods-action-icon @click="onClickCollection" :icon="iconImg" text="加入收藏" color="#ff5000" />
				<van-goods-action-button @click="onClickPhone" type="primary" text="电话联系我看车" />
			</van-goods-action>
		</div>
	</div>
</template>

<script>
	import {
		Dialog,
		ImagePreview
	} from 'vant';

	export default {
		data() {
			return {
				current: 0,
				activeNames: [' '],
				iconImg: "star-o",
				collectResult: "false",
				user: null,
				car: {},
				shopInfo: {},
				carImgs: []
			}
		},
		methods: {
			onChange(index) {
				this.current = index;
			},
			onClickImg() {
				let arr = [];
				this.carImgs.forEach(function(e) {
					arr.push(e.imgUrl);
				})
				ImagePreview({
					images: arr,
					closeable: true
				});
			},
			onClickLeft() {
				this.$router.back()
			},
			onClickWeiXin() {
				Dialog.alert({
					title: '微信号',
					message: this.shopInfo.shopWeiXin
				});
			},
			onClickPhone() {
				let phone = this.shopInfo.shopPhone;
				window.location.href = 'tel:' + phone
			},
			onClickCollection() {
				if (this.user != null) {
					if (this.collectResult == "true") {
						this.$axios({
							method: 'post',
							url: '/usercollect/deleteCollection',
							data: this.$qs.stringify({
								userId: this.user.userId,
								carId: this.car.carId
							})
						}).then((resp) => {
							if (resp.data.msg == "取消收藏成功") {
								this.collectResult = "false";
								this.iconImg = "star-o";
							}
						})
						this.iconImg = "star"
					} else {
						this.$axios({
							method: 'post',
							url: '/usercollect/saveCollection',
							data: this.$qs.stringify({
								userId: this.user.userId,
								carId: this.car.carId
							})
						}).then((resp) => {
							if (resp.data.msg == "收藏成功") {
								this.collectResult = "true";
								this.iconImg = "star";
							}
						})
					}

				} else {
					Dialog.alert({
						message: "您还没登陆，请登录后再收藏"
					});
				}
			}
		},
		mounted() {
			this.user = this.$cookies.get('user');
			let carId = this.$route.query.carId;

			/* 查询此辆车的详情信息 */
			this.$axios({
				method: 'post',
				url: '/car/findCarById',
				data: this.$qs.stringify({
					carId: carId
				})
			}).then((resp) => {
				if (resp.data.status == 200) {
					this.car = resp.data.obj;
					this.carImgs = resp.data.obj.carImg;
					this.shopInfo = resp.data.obj.shopInfo;
				}
			})

			/* 获取用户是否收藏 */
			if (this.user != null) {
				this.$axios({
					method: 'post',
					url: '/usercollect/findCarIfCollection',
					data: this.$qs.stringify({
						userId: this.user.userId,
						carId: carId
					})
				}).then((resp) => {
					if (resp.data.msg == "true") {
						//已经收藏
						this.collectResult = "true";
						//已经收藏，设置收藏图标为实底
						this.iconImg = "star";
					}
				})
			}

		}
	}
</script>

<style>
	.container {
		margin-bottom: 70px;
	}

	.custom-indicator {
		position: absolute;
		right: 5px;
		bottom: 5px;
		font-size: 20px;
	}

	.car-detail-title {
		text-align: left;
		font-size: 20px;
		font-weight: bold;
		margin: 0px 10px;
	}

	.car-detail-price {
		text-align: left;
		font-weight: bold;
		color: #ff0000;
		font-size: 22px;
		margin: 5px 10px;
	}

	.car-detail-info-1 {
		margin: 8px 0px;
	}

	.car-detail-info-2 {
		margin: 8px 0px;
		font-weight: bolder;
	}

	.car-detail-info-div {
		width: 100px;
	}
</style>
